<template>
 <div class="d-uploader">
    <el-button
      @click="handleChooseFile"
      class="d-uploader-btn-choose"
      >选择文件</el-button>
    <input ref="file" type="file" @change="handleChange" :accept="accept" :multiple="multiple" class="d-uploader-file" />
 </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default () {
        return 'file'
      }
    },
    // 支持的文件
    accept: {
      type: String,
      default () {
        return '*'
      }
    },
    multiple: {
      type: Boolean,
      default () {
        return true
      }
    }
  },

  data () {
    return {
      files: []
    }
  },

  methods: {
    // 选择文件
    handleChooseFile () {
      this.$refs.file.click()
    },
    // 文件修改
    handleChange (e) {
      let files = e.target.files
      files = Array.from(files).map(file => {
        return {
          name: file.name,
          size: file.size,
          type: file.type,
          file: file,
          id: ''
        }
      })
      this.files = [...this.files, ...files]
      this.$emit('change', files, e)
    }
  }
}
</script>

<style lang="less">
.d-uploader {
  position: relative;
  .d-uploader-file {
    display: none;
  }
}
</style>
